<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            overflow: hidden;
        }
        .main{
            width: 700px;
            margin: 200px auto;
        }
        .keywords{
            width: 500px;
            font-size: 28px;
        }
        input[type=button]{
            font-size: 24px;
        }
        .message{
            border:1px solid #cccccc;
            width: 500px;
            margin-left: -137px;
            border-top: none;
        }
        .message ul{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .message ul li{
            padding: 5px;
            cursor: pointer;
        }
    </style>
</head>
<script src="jquery-3.2.1.js"></script>
<body>

    <div align="center" class="main">
        <input type="text" class="keywords">
        <input type="button" value="搜搜一下">
        <div class="message" align="left" style="display:none;">
            <ul>
                <!--  -->
            </ul>
        </div>
    </div>
    <script>
        $(".message ul").on("mouseover","li",function(){    // 鼠标移入事件
            this.style.background="gray";
        })
        $(".message ul").on("mouseout","li",function(){
            this.style.background="white";
        })
        function getInfo(obj){
            console.log(obj);
            // 解析数据 然后把message里面的ul里面的li元素的数据替换
            var results = obj.result;
            document.querySelector(".message>ul").innerHTML = "";   // 每一次清空
            for(var i=0;i<results.length;i++){
                var li = document.createElement("li");
                li.innerHTML = results[i].word;     // 返回的数据渲染到html页面上
                document.querySelector(".message>ul").appendChild(li);   // 最后加在页面上
            }
        }

        document.querySelector(".keywords").onkeyup=function(){
            var keywords = this.value;
            if(keywords.length>0){  // 如果有输入内容
                document.querySelector(".message").style.display = "block";
                var script = document.createElement("script");         // 调用360接口
                script.src ="https://sug.so.360.cn/suggest?callback=getInfo&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word="+keywords;
                document.body.appendChild(script);
            }else{
                document.querySelector(".message").style.display = "none";
            }
        }
    </script>

</body>
</html>